<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能诊疗预约平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<main>
    <!-- 预约流程 -->
    <section id="appointment" class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">在线预约</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    简单几步，轻松完成预约，告别排队等待，享受良心医疗服务。
                </p>
            </div>

            <div class="bg-gray-50 rounded-2xl p-8 mb-12">
                <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
                    <div class="lg:col-span-3">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold mb-4">选择科室</h3>
                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                <button data-department="心内科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    心内科
                                </button>
                                <button data-department="呼吸科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    呼吸科
                                </button>
                                <button data-department="消化科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    消化科
                                </button>
                                <button data-department="神经内科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    神经内科
                                </button>
                                <button data-department="骨科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    骨科
                                </button>
                                <button data-department="儿科" class="department-btn px-4 py-2 rounded-lg border border-gray-200 hover:border-primary hover:text-primary transition-colors">
                                    儿科
                                </button>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h3 class="text-lg font-semibold mb-4">选择医生</h3>
                            <div class="space-y-4">
                                <div data-doctor="治不活" data-fee="200" data-title="主任医师" class="doctor-card flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                                    <img src="https://picsum.photos/60/60?random=5" alt="医生" class="w-14 h-14 rounded-full object-cover">
                                    <div class="ml-4 flex-1">
                                        <div class="flex justify-between">
                                            <h4 class="font-medium">治不活医生</h4>
                                            <span class="text-sm text-primary">主任医师</span>
                                        </div>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400 text-xs">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <span class="ml-1 text-xs text-gray-500">4.8 (120评价)</span>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">心内科 | 擅长：冠心病、心力衰竭</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm text-gray-500">￥200</span>
                                        <button class="doctor-select-btn mt-1 px-3 py-1 bg-primary text-white text-xs rounded-lg hover:bg-primary/90 transition-colors">
                                            预约
                                        </button>
                                    </div>
                                </div>

                                <div data-doctor="死得快" data-fee="180" data-title="副主任医师" class="doctor-card flex items-center p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                                    <img src="https://picsum.photos/60/60?random=6" alt="医生" class="w-14 h-14 rounded-full object-cover">
                                    <div class="ml-4 flex-1">
                                        <div class="flex justify-between">
                                            <h4 class="font-medium">死得快医生</h4>
                                            <span class="text-sm text-primary">副主任医师</span>
                                        </div>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400 text-xs">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-o"></i>
                                            </div>
                                            <span class="ml-1 text-xs text-gray-500">4.2 (98评价)</span>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">心内科 | 擅长：心律失常、高血压</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm text-gray-500">￥180</span>
                                        <button class="doctor-select-btn mt-1 px-3 py-1 bg-primary text-white text-xs rounded-lg hover:bg-primary/90 transition-colors">
                                            预约
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold mb-4">选择日期和时间</h3>

                            <!-- 日历视图 -->
                            <div class="mb-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 id="currentMonthYear" class="font-medium"></h4>
                                    <div class="flex space-x-2">
                                        <button id="prevMonth" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                            <i class="fa fa-chevron-left text-gray-500"></i>
                                        </button>
                                        <button id="nextMonth" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                            <i class="fa fa-chevron-right text-gray-500"></i>
                                        </button>
                                    </div>
                                </div>

                                <div id="calendarHeader" class="grid grid-cols-7 gap-1 text-center">
                                    <!-- 星期标题将由JavaScript动态生成 -->
                                </div>

                                <div id="calendarDays" class="grid grid-cols-7 gap-1 text-center">
                                    <!-- 日期将由JavaScript动态生成 -->
                                </div>
                            </div>

                            <!-- 时间段选择 -->
                            <h4 class="font-medium mb-3">上午</h4>
                            <div id="morningSlots" class="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-4">
                                <button data-time="08:30-09:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    08:30-09:00
                                </button>
                                <button data-time="09:00-09:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    09:00-09:30
                                </button>
                                <button data-time="09:30-10:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    09:30-10:00
                                </button>
                                <button data-time="10:00-10:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    10:00-10:30
                                </button>
                                <button data-time="10:30-11:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    10:30-11:00
                                </button>
                                <button data-time="11:00-11:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    11:00-11:30
                                </button>
                                <button class="py-2 border border-gray-400 bg-gray-100 text-gray-400 rounded-lg cursor-not-allowed text-sm">
                                    11:30-12:00
                                </button>
                            </div>

                            <h4 class="font-medium mb-3">下午</h4>
                            <div id="afternoonSlots" class="grid grid-cols-3 sm:grid-cols-4 gap-2">
                                <button data-time="13:30-14:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    13:30-14:00
                                </button>
                                <button data-time="14:00-14:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    14:00-14:30
                                </button>
                                <button data-time="14:30-15:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    14:30-15:00
                                </button>
                                <button data-time="15:00-15:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    15:00-15:30
                                </button>
                                <button data-time="15:30-16:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    15:30-16:00
                                </button>
                                <button data-time="16:00-16:30" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    16:00-16:30
                                </button>
                                <button data-time="16:30-17:00" class="time-slot-btn py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors text-sm">
                                    16:30-17:00
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-2">
                        <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
                            <h3 class="text-lg font-semibold mb-4">预约信息确认</h3>

                            <div class="space-y-4 mb-6">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">科室</span>
                                    <span id="confirmDepartment" class="font-medium">请选择科室</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">医生</span>
                                    <span id="confirmDoctor" class="font-medium">请选择医生</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">职称</span>
                                    <span id="confirmTitle" class="font-medium">-</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">日期</span>
                                    <span id="selectedDate" class="font-medium">请选择日期</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">时间</span>
                                    <span id="confirmTime" class="font-medium">请选择时间</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">挂号费</span>
                                    <span id="confirmFee" class="font-medium">-</span>
                                </div>
                            </div>


<!--                            患者信息表单-->
                            <div class="border-t border-gray-100 pt-4 mb-6">
                                <form id="patientForm" class="p-6" action="/moxiang/patientkeep" method="post" >
                                <h4 class="font-medium mb-3">患者信息</h4>
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                        <input type="text" name="patientname" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入姓名">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                        <input type="text" name="patientphon" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入手机号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">身份证号</label>
                                        <input type="text" name="patientcard" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入身份证号">
                                    </div>
                                </div>
                                </form>
                            </div>

                            <div class="border-t border-gray-100 pt-4 mb-6">
                                <h4 class="font-medium mb-3">支付方式</h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <button class="flex items-center justify-center p-3 border border-primary bg-primary/5 rounded-lg">
                                        <i class="fa fa-weixin text-green-600 text-xl mr-2"></i>
                                        <span>微信支付</span>
                                    </button>
                                    <button id="CreditcardBtn" class="flex items-center justify-center p-3 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition-colors">
                                        <i class="fa fa-credit-card text-blue-600 text-xl mr-2"></i>
                                        <span>银行卡</span>
                                    </button>
                                </div>
                            </div>

                            <button id="payBtn" class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                                确认支付<span id="payAmount">￥0</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 支付成功模态框 -->
            <div id="successModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
                <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
                <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 p-8 text-center">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa fa-check text-green-500 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">支付成功</h3>
                    <p class="text-gray-600 mb-6">您的预约已成功提交，预约号：YY20250612001</p>
                    <div class="flex justify-center space-x-4">
                        <button id="closeSuccessBtn" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                            返回首页
                        </button>

                        <button id="informationBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            查看预约
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

<script>
    // 支付成功模态框
    const payBtn = document.getElementById('payBtn');
    const successModal = document.getElementById('successModal');
    const closeSuccessBtn = document.getElementById('closeSuccessBtn');
    const CreditcardBtn = document.getElementById('CreditcardBtn')
    const informationBtn = document.getElementById('informationBtn')


    payBtn.addEventListener('click', () => {
        // 检查是否所有必填项都已填写
        const department = document.getElementById('confirmDepartment').textContent;
        const doctor = document.getElementById('confirmDoctor').textContent;
        const date = document.getElementById('selectedDate').textContent;
        const time = document.getElementById('confirmTime').textContent;

        if (department === '请选择科室' || doctor === '请选择医生' ||
            date === '请选择日期' || time === '请选择时间') {
            alert('请完成所有必填选项后再提交预约');
            return;
        }

        //提交病人信息表单
        const patientForm = document.getElementById('patientForm');
        patientForm.submit();

        successModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    });

    //银行卡支付维护,打开的是一个新界面
    CreditcardBtn.addEventListener('click', () => {
        window.open('/moxiang/keep');
    });

    //跳转到预约信息
    informationBtn.addEventListener('click',()=>{
        window.location.href = '/moxiang/information';
    });

    closeSuccessBtn.addEventListener('click', () => {
        window.location.href = '/moxiang/homeb';
    });

    // 动态日历功能
    document.addEventListener('DOMContentLoaded', function() {
        // 获取当前日期
        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = currentDate.getMonth();
        let selectedDay = currentDate.getDate();

        // 更新显示的月份和年份
        const monthYearElement = document.getElementById('currentMonthYear');
        const calendarDaysElement = document.getElementById('calendarDays');
        const selectedDateElement = document.getElementById('selectedDate');
        const calendarHeaderElement = document.getElementById('calendarHeader');

        // 星期标题
        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
        calendarHeaderElement.innerHTML = weekdays.map(day =>
            `<div class="text-gray-500 text-sm py-2">${day}</div>`
        ).join('');

        // 更新日历显示
        function updateCalendar() {
            // 更新月份和年份显示
            monthYearElement.textContent = `${currentYear}年${currentMonth + 1}月`;

            // 设置选中的日期显示
            const formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`;
            selectedDateElement.textContent = formattedDate;
            updateConfirmInfo('date', formattedDate);

            // 获取当月第一天和最后一天
            const firstDay = new Date(currentYear, currentMonth, 1);
            const lastDay = new Date(currentYear, currentMonth + 1, 0);

            // 获取当月天数
            const daysInMonth = lastDay.getDate();

            // 获取当月第一天是星期几
            const firstDayOfWeek = firstDay.getDay();

            // 获取上个月最后几天
            const prevMonthLastDay = new Date(currentYear, currentMonth, 0).getDate();

            // 生成日历HTML
            let calendarHTML = '';

            // 上个月的日期
            for (let i = firstDayOfWeek - 1; i >= 0; i--) {
                calendarHTML += `<div class="py-2 text-gray-300">${prevMonthLastDay - i}</div>`;
            }

            // 当月的日期
            for (let i = 1; i <= daysInMonth; i++) {
                const isToday = i === currentDate.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
                const isSelected = i === selectedDay;

                if (isSelected) {
                    calendarHTML += `<div class="py-2 rounded-full bg-primary text-white font-medium cursor-pointer" onclick="selectDay(${i})">${i}</div>`;
                } else if (isToday) {
                    calendarHTML += `<div class="py-2 rounded-full bg-gray-100 cursor-pointer" onclick="selectDay(${i})">${i}</div>`;
                } else {
                    calendarHTML += `<div class="py-2 hover:bg-gray-100 rounded-full cursor-pointer" onclick="selectDay(${i})">${i}</div>`;
                }
            }

            // 计算下个月需要显示的天数
            const totalCells = 42; // 6行x7天
            const remainingCells = totalCells - (firstDayOfWeek + daysInMonth);

            // 下个月的日期
            for (let i = 1; i <= remainingCells; i++) {
                calendarHTML += `<div class="py-2 text-gray-300">${i}</div>`;
            }

            calendarDaysElement.innerHTML = calendarHTML;
        }

        // 选择日期
        window.selectDay = function(day) {
            selectedDay = day;
            updateCalendar();
        };

        // 上个月按钮
        document.getElementById('prevMonth').addEventListener('click', function() {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            selectedDay = 1; // 重置选中日期为1号
            updateCalendar();
        });

        // 下个月按钮
        document.getElementById('nextMonth').addEventListener('click', function() {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            selectedDay = 1; // 重置选中日期为1号
            updateCalendar();
        });

        // 初始化日历
        updateCalendar();
    });

    // 科室选择功能
    const departmentBtns = document.querySelectorAll('.department-btn');
    departmentBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有科室按钮的选中状态
            departmentBtns.forEach(b => {
                b.classList.remove('bg-primary', 'text-white', 'border-primary');
                b.classList.add('border-gray-200', 'hover:border-primary', 'hover:text-primary');
            });

            // 设置当前选中科室的样式
            this.classList.remove('border-gray-200', 'hover:border-primary', 'hover:text-primary');
            this.classList.add('bg-primary', 'text-white', 'border-primary');

            // 更新预约信息
            const department = this.getAttribute('data-department');
            updateConfirmInfo('department', department);
        });
    });

    // 医生选择功能
    const doctorCards = document.querySelectorAll('.doctor-card');
    const doctorSelectBtns = document.querySelectorAll('.doctor-select-btn');

    doctorSelectBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡

            const card = this.closest('.doctor-card');
            const doctor = card.getAttribute('data-doctor');
            const fee = card.getAttribute('data-fee');
            const title = card.getAttribute('data-title');

            // 移除所有医生卡片的选中状态
            doctorCards.forEach(c => {
                c.classList.remove('border-primary', 'bg-primary/5');
                c.querySelector('.doctor-select-btn').classList.remove('bg-primary/20', 'text-primary');
                c.querySelector('.doctor-select-btn').classList.add('bg-primary', 'text-white');
            });

            // 设置当前选中医生的样式
            card.classList.add('border-primary', 'bg-primary/5');
            this.classList.remove('bg-primary', 'text-white');
            this.classList.add('bg-primary/20', 'text-primary');

            // 更新预约信息
            updateConfirmInfo('doctor', doctor);
            updateConfirmInfo('fee', '￥' + fee);
            updateConfirmInfo('title', title);
            updatePayAmount(fee);
        });
    });

    // 也可以点击整个卡片选择医生
    doctorCards.forEach(card => {
        card.addEventListener('click', function() {
            const btn = this.querySelector('.doctor-select-btn');
            btn.click(); // 触发按钮的点击事件
        });
    });

    // 时间段选择功能
    const timeSlotBtns = document.querySelectorAll('.time-slot-btn');
    timeSlotBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有时间段的选中状态
            timeSlotBtns.forEach(b => {
                b.classList.remove('bg-primary', 'text-white', 'border-primary');
                b.classList.add('border-gray-200', 'hover:border-primary', 'hover:text-primary');
            });

            // 设置当前选中时间段的样式
            this.classList.remove('border-gray-200', 'hover:border-primary', 'hover:text-primary');
            this.classList.add('bg-primary', 'text-white', 'border-primary');

            // 更新预约信息
            const time = this.getAttribute('data-time');
            updateConfirmInfo('time', time);
        });
    });

    // 更新预约确认信息
    function updateConfirmInfo(type, value) {
        switch(type) {
            case 'department':
                document.getElementById('confirmDepartment').textContent = value;
                break;
            case 'doctor':
                document.getElementById('confirmDoctor').textContent = value + '医生';
                break;
            case 'title':
                document.getElementById('confirmTitle').textContent = value;
                break;
            case 'date':
                document.getElementById('selectedDate').textContent = value;
                break;
            case 'time':
                document.getElementById('confirmTime').textContent = value;
                break;
            case 'fee':
                document.getElementById('confirmFee').textContent = value;
                break;
        }
    }

    // 更新支付金额
    function updatePayAmount(amount) {
        document.getElementById('payAmount').textContent = '￥' + amount;
    }
</script>
</body>
</html>